<template>
    <div>
        <div class="app_card mb-2 pt-4 pb-4">
            <div class="d-flex justify-content-between search-form">
                <div class="flex-grow-1">
                    <el-input class="w200px mr-3" v-model="queryForm.room" placeholder="请输入教室" clearable
                        @blur="onRefresh"></el-input>
                    <!-- <el-radio-group class="radio_button" v-model="radioFloor" @change="floorChange">
            <el-radio-button label="-1">全部</el-radio-button>
            <el-radio-button label="-3">故障教室</el-radio-button>
            <el-radio-button label="-2">上课教室</el-radio-button>
          </el-radio-group> -->
                </div>
                <!-- "value": 2  // value用来选择上下课，value = 2 下课，value = 1上课 -->

                <div class="d-flex">
                    <!-- <el-button @click="handleClick('1', '上课')" type="primary" plain>上课</el-button>
                    <el-button @click="handleClick('0', '巡检巡检')" type="primary" plain>巡检</el-button>
                    <el-button @click="handleClick('2', '下课')" type="primary" plain>下课</el-button>
                    <el-tooltip class="box-item" effect="dark"
                        content="启动自动巡检功能将自动拍摄教室画面，并根据画面判断教室幕布、投影仪状态。请确保启动前点击上课打开教室受控设备，巡检完成后点击下课关闭设备。" placement="top">
                        <el-button link><el-icon>
                                <Warning />
                            </el-icon></el-button>
                    </el-tooltip> -->
                    <el-button @click="router.go(-1)" type="primary" plain>返回</el-button>


                </div>
            </div>
        </div>
        <div class="app_card pt-4  pb-5">
            <el-table v-loading="loading" element-loading-text="查询中..." stripe size="large" :data="dataOfTable"
                height="calc(100vh - 300px)">
                <el-table-column prop="room" label="教室" height="33" align="center" width="200">
                </el-table-column>
                <el-table-column prop="Status" label="教室状态" align="center">
                    <template #default="scope">
                        <img v-if="scope.row.status != 4" src="@/assets/img/bug.svg" width="16" class="v-sub">
                        <font color="#FFBB00" v-if="scope.row.status == 0">教室系统没电</font>
                        <font color="#FFBB00" v-else-if="scope.row.status == 1">投影机没电，幕布正常</font>
                        <font color="#FFBB00" v-else-if="scope.row.status == 2">投影机有电无信号，幕布正常</font>
                        <font color="#FFBB00" v-else-if="scope.row.status == 3">投影机正常，幕布不正常</font>
                        <p v-else-if="scope.row.status == 4">正常上课</p>
                    </template>
                </el-table-column>
                <!-- 设备型号 -->
                <el-table-column prop="model" label="显示设备" align="center">
                    <template #default="scope">
                        <template v-if="scope.row.onClass === 0">关闭</template>
                        <template v-if="scope.row.onClass === 1"> 开启</template>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="AI" label="AI 识别结果">
          <template #default="scope">
            {{scope.row.AI}}
          </template>
        </el-table-column> -->
                <el-table-column prop="img" label="讲台图片" align="center">
                    <template #default="scope">
                        <el-image style="height: 30px;" :src="scope.row.img" :preview-src-list="[scope.row.img]"
                            hide-on-click-modal="true" preview-teleported="true" fit="cover">
                        </el-image>
                        <!-- <el-tooltip effect="customized">
              <template #content>
                <div> 上课： 提示提示提示提示提示提示提示提示</div>
                <div> 智能巡检： 提示提示提示提示提示提示提示提示</div>
                <div> 下课： 提示提示提示提示提示提示提示提示</div>
              </template>
    <el-image style="height: 30px" :src="scope.row.img" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
        :preview-src-list="[scope.row.img]" :initial-index="0" fit="cover" />
    </el-tooltip> -->
                    </template>
                </el-table-column>
                <el-table-column prop="Sat" label="巡检时间" align="center">
                    <template #default="scope">
                        {{ resetForm('YYYY-mm-dd HH:MM', scope.row.createTime) }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="Fri" label="分析结果">
          <template #default="scope">
            {{findValue(statusOption,scope.row.status)}}
          </template>
        </el-table-column> -->


            </el-table>
            <Pagination ref="paginationRef" @handleChange="handleChange" />
        </div>
        <ControlsDialog ref="controlsDialogRef" @success="loadData()"></ControlsDialog>
    </div>
</template>

<script setup>
/**
 * 教室管理
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';
import { statusList } from '@/apis/model/PatrollogModel';
import { findValue } from '@/utils/EsCommon';
import { resetForm } from '@/utils/EsDate.js';
import { useRouter } from 'vue-router';
//组件
import Pagination from '@/components/pagination/index.vue';
import ControlsDialog from './ControlsDialog.vue';
import EditDialog from './EditDialog.vue';

const router = useRouter()
// ======================================================
//                      变量声明
// ======================================================
const loading = ref(false);
// 表格查询参数
const queryForm = ref({
    room: "",
})
// 表格查询参数
const queryParam = ref({
    sort: "id",
    order: "desc",
    limit: 10,
    page: 1,
    query: "",
})

const statusOption = ref(statusList);


const authStore = useAuthStore();
const radioFloor = ref('-1');

const semesterValue = ref('1')

// 组件引用
const paginationRef = ref(null);
const controlsDialogRef = ref(null);
const editDialogRef = ref(null)
// 表格数据
const dataOfTable = ref([]);

// 表格多选数据
const multipleSelection = ref([]);

// 教室分组数据
const dataOfGroups = ref([]);
const defaultProps = {
    children: 'children',
    label: 'label',
}







// 
// ======================================================
//                      处理事件
// ======================================================

const floorChange = () => {
    if (radioFloor.value == "-2") {//上课
    } else if (radioFloor.value == "-3") {//故障教室
    } else if (radioFloor.value == "-1") {//全部
    } else {

    }
}

// ======================================================
//                      树形处理事件
// ======================================================


// 点击分组树形节点
const onClickNode = (data) => {
    console.log('点击树形节点', data)
    queryParam.value.class_id = data.id;
    loadData();

}

//自动巡检
const hancelAiCheck = () => {
    const loadingInstance = ElLoading.service({ text: '巡检中...' })
    ElMessageBox.confirm("即将开始巡检", "温馨提示").then(() => {
        EsAjax.post(ApiUrls.aiCheck).then(res => {
            if (res.data.code != 200) {
                ElMessage.warning(res.data.data + res.data.message);
                return;
            }
            onRefresh()
        }).catch(err => {
            console.log(err)
            ElMessage.error('网络错误：' + err.message);
        }).finally(() => {
            loadingInstance.close()
        })
    }).catch(() => { })
}

// 查看详情
const checkDetail = (row) => {
    editDialogRef.value.show('巡检详情')
}
// 点击刷新按钮
const onRefresh = () => {
    queryParam.value.page = 1;
    paginationRef.value?.changeTotal({ totalCount: 0 })
    loadData();
}

// 处理表格全选
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
// 当某一行被点击时会触发该事件
const handleClick = (type, title) => {
    controlsDialogRef.value.show(type, title);
}
// 处理分页尺寸
const handleChange = (data = null) => {
    queryParam.value.page = data?.page;
    queryParam.value.limit = data?.limit;
    loadData();
}

// ======================================================
//                      表格处理事件
// ======================================================

const loadData = () => {
    let _queryParam = queryParam.value
    _queryParam.query = ''
    if (queryForm.value.room) {
        _queryParam.query = "room=" + queryForm.value.room;
    }
    _queryParam.offset = (_queryParam.page - 1) * _queryParam.limit || 0;
    loading.value = true
    EsAjax.post(ApiUrls.patrollogDatagrid, { ..._queryParam }).then(res => {
        if (res.data.code != 200) {
            ElMessage.warning(res.data.data + res.data.msg);
            return;
        }
        let { list, totalCount } = res.data.data
        dataOfTable.value = list;
        paginationRef.value?.changeTotal({ totalCount: totalCount })
    }).catch(err => {
        ElMessage.error(err.message);
    }).finally(() => {
        loading.value = false
    })
}


onMounted(() => {
    loadData();
})

</script>
<style lang="less"></style>
